<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0px;padding: 0px;}
    .wrap{width: 700px;height: 250px;position: relative;margin-left:150px;}
    #content{width: 700px;height: 250px;}
    #smallpic{width: 700px;height: 250px;}
    #bigpic{width: 700px;height: 250px;position: absolute;}
    #shadow{position: absolute;width:50px;height:50px;background-color: black;}
    #bigcontent{position: absolute;left: 0px;overflow: hidden;width:50px;height:50px;}
    #box{width: 700px;height: 30px;position: absolute;background:cyan;
         margin-top: 30px;border-radius: 16px;}
    #button{width: 50px;height: 50px;border-radius: 50%;background: cadetblue;position: absolute;}
    /* #box{position: relative;} */
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            <img src="bg.png" alt="" id="smallpic">
            <div id="shadow"></div>
            <div id="bigcontent">
              <img src="bg.png" alt="" id="bigpic">
            </div>
        </div>
        <div id="box">
            <div id="button"></div>
        </div>
    </div>

    <script>
    var shadow=document.getElementById("shadow")
    var content=document.getElementById("content")
    var maxwidth=content.clientWidth-shadow.clientWidth
    var maxheight=content.clientHeight-shadow.clientHeight
    var bigcontent=document.getElementById("bigcontent")
    var bigpic=document.getElementById("bigpic")
    var button=document.getElementById("button")
    var box=document.getElementById("box")
    var wrap=document.getElementById("wrap")
    var x=Math.random()*maxwidth
    while(x<200){
        x=Math.random()*maxwidth 
    }
    var y=Math.random()*maxheight
    console.log(maxheight)
    shadow.style.left=x+"px"
    shadow.style.top=y+"px"
    bigcontent.style.top=y+"px"
    bigpic.style.left=-x+"px"
    bigpic.style.top=-y+"px"
    button.style.top=-(button.clientHeight-box.clientHeight)/2+"px"
    var flag=false;
    box.onmousedown=function(e){
        flag=true;
        var X=e.offsetX
        document.onmousemove=function(e){
            var max=box.clientWidth-button.clientWidth
            var left=e.pageX-X
                if(left<=0){
                    left=0
                }
                if(left>=max){
                    left=max
                }
            button.style.left=left+"px"
            bigcontent.style.left=left+"px"
        }
        document.onmouseup=function(){
            if(flag){
            document.onmousemove=""
            if(bigcontent.offsetLeft>=x-5&&bigcontent.offsetLeft<=x+5){
                console.log("解锁成功")
                location.href="https://www.baidu.com"
            }else{
                console.log("解锁失败")

               var index=3
               fn()
                function fn(){
                    if(index<=0){
                        yd()
                        return false
                    }
                wrap.style.marginLeft=-8+"px"
                var time=setTimeout(function(){
                    setTimeout(time)
                   wrap.style.marginLeft=0+"px"
                   setTimeout(function(){
                    index--
                       fn()
                   },50)
                },50)
                }
                
              function yd(){
                var start=bigcontent.offsetLeft
                var end=0
                var speed=(end-start)/50
               var time=setInterval(function(){
                   if(button.offsetLeft<=0){
                      clearInterval(time)
                      button.style.left=0
                      bigcontent.style.left=0
                   }
                button.style.left=button.offsetLeft+speed+"px"
                bigcontent.style.left=bigcontent.offsetLeft+speed+"px"
               },30)
            }
            }

        }
    }
    }
    </script>
</body>
</html>